<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>卡片组件-小懒猫</title>
	<meta name="keywords" content="关键字,关键字"/>
	<meta name="description" content="描述信息">
	<link rel="stylesheet" href="css/pugui.css"/>
	<style>
		h1{
			margin-bottom: 30px;
		}
		.pug-card-title span{
			font-weight: bold;
		}
		.pug-card-main{
			background: orange;
		}
	</style>
</head>
<body>
	<div id="app">
		
		
		<Pug-Card title="文章列表" @click="toWmsg">
			<template #default>
			    <div class="pug-card-main">
			        <p>在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令并以 v-slot 的参数的形式提供其名称：</p>
			        <p>在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：</p>
			        <p>在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：</p>
			    </div>
			</template>
		</Pug-Card>
		
		<Pug-Card title="咨询列表" @click="toZmsg">
			<template #default>
			    <div class="pug-card-main">
			        <p>在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令并以 v-slot 的参数的形式提供其名称：</p>
			        <p>在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：</p>
			        <p>在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：</p>
			    </div>
			</template>
		</Pug-Card>
	<script src="../js/vue-min.js"></script>
	<script setup>
		const app = Vue.createApp({
			data() {
				return {
					
				}
			},
			methods : {
				toWmsg(msg){
					console.log("文章详情....")
				},
				toZmsg(){
					console.log("咨询详情....")
				}
			}
		});
		app.component("pug-card",{
			"template" : `<div class="pug-cardbox">
							<div class="pug-card-title">
								<span>{{title}}</span>
								<button class="pug-car-button" @click="toDetail">查看更多</button>
							</div>
							<div class="pug-card-body">
								<slot></slot>
							</div>
						</div>`,
			props: {
				className: {
				    type: String,
				    default: ""
				},
				title:{
					type: String,
					default: "卡片组件"
				}
			},
			methods : {
				// 在开中，组件是在父组件进行调用和使用。这个时候我们肯定在触发的时候在调用父行为才更合适。
				toDetail() {
				    this.$emit("click.native");
				}
			}
		})
		app.mount("#app");
	</script>
</body>
</html>